<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SocketIO Log Viewer</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f9;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      h1 {
        color: #333;
        margin: 20px 0;
      }

      #logs {
        width: 80%;
        max-width: 800px;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        overflow: hidden;
      }

      .log-entry {
        padding: 10px;
        border-bottom: 1px solid #ddd;
        cursor: pointer;
      }

      .log-entry:last-child {
        border-bottom: none;
      }

      .log-timestamp {
        font-size: 12px;
        color: #666;
      }

      .log-title {
        font-size: 16px;
        font-weight: bold;
      }

      .log-details {
        font-size: 14px;
        margin-top: 5px;
        white-space: pre-wrap;
        display: none; /* 默认隐藏 */
      }

      .log-entry.expanded .log-details {
        display: block; /* 展开时显示 */
      }

      /* 不同日志等级的颜色 */
      .log-level-info {
        color: blue;
      }

      .log-level-warning {
        color: orange;
      }

      .log-level-error {
        color: red;
      }

      .log-level-default {
        color: #333;
      }

      .log-subtitle {
        font-size: 14px;
        color: #555;
      }
    </style>
  </head>
  <body>
    <h1>SocketIO Log Viewer</h1>
    <div id="logs"></div>

    <script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
    <script>
      const socket = io("http://192.168.3.11:5000");

      socket.on("connect", () => {
        console.log("SocketIO connected successfully");
      });

      socket.on("log", (data) => {
        console.log("Received log event:", data);
        const logsContainer = document.getElementById("logs");
        const logEntry = document.createElement("div");
        logEntry.className = "log-entry";

        // 获取当前时间戳
        const timestamp = new Date().toLocaleTimeString();

        // 默认标题
        let title = data.data || data.event || "N/A";

        // 从 original_message 中提取日志等级
        let logLevelClass = "log-level-default";
        if (data.original_message) {
          if (/\"level\": \"info\"/.test(data.original_message)) {
            logLevelClass = "log-level-info";
          } else if (/\"level\": \"warning\"/.test(data.original_message)) {
            logLevelClass = "log-level-warning";
          } else if (/\"level\": \"error\"/.test(data.original_message)) {
            logLevelClass = "log-level-error";
          }
        }

        // 从 original_message 中提取副标题
        let subtitle = "";
        const eventMatch = data.original_message?.match(/\"event\": \"(.*?)\"/);
        if (eventMatch) {
          subtitle = eventMatch[1];
        }

        // 日志详细内容（如果有 original_message 则支持展开）
        const details = data.original_message
          ? `<div class="log-details">${data.original_message.replace(
              /\\n|\\r/g,
              "\n"
            )}</div>`
          : "";

        // 创建日志内容
        logEntry.innerHTML = `
          <span class="log-timestamp">${timestamp}</span>
          <div class="log-title ${logLevelClass}">${title}</div>
          ${
            subtitle
              ? `<div class="log-subtitle">[Subtitle: ${subtitle}]</div>`
              : ""
          }
          ${details}
        `;

        // 点击日志项切换展开/收起状态
        if (details) {
          logEntry.addEventListener("click", () => {
            logEntry.classList.toggle("expanded");
          });
        }

        // 添加到日志容器
        logsContainer.prepend(logEntry);
      });

      socket.on("connect_error", (error) => {
        console.error("Connection error:", error);
      });
    </script>
  </body>
</html>
